<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini" label-width="80px">
        <el-form-item label="创建时间">
          <el-date-picker style="width:173px" v-model="q.created_at_begin" value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
          -
          <el-date-picker style="width:173px" v-model="q.created_at_end" value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="用户ID:">
          <el-input v-model="q.user_id" placeholder="请输入用户ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>

        <el-form-item label="关联代理:">
          <el-select v-model="q.agency_id" clearable filterable placeholder="请输入代理账号">
            <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属总代:">
          <el-select v-model="q.parent_id" clearable filterable placeholder="请输入所属总代">
            <el-option v-for="item of AgencyMainList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="120" label="所属商户:">
          <el-select v-model="q.mch_id" clearable placeholder="请选择">
            <el-option
              v-for="item in MerchantsList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="评价类型:">
          <el-select v-model="q.auto_comment" clearable placeholder="请选择">
            <el-option v-for="(value,name) of {'自动评价':true,'主动评价':false}" :key="name" :label="name"
                       :value="value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单ID:">
          <el-input v-model="q.order_id" placeholder="订单ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>
        <!-- <el-form-item label-width="100" label="支付方式:">
          <el-select v-model="q.pay_type" clearable placeholder="请选择">
            <el-option v-for="(statu, index) of PayMethodType" :key="index" :label="statu" :value="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款方式:">
          <el-select v-model="q.receipt_type" clearable placeholder="请选择">
            <el-option v-for="(val,name) of RecepiptMethodType" :key="val" :label="val"
                       :value="name"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="评分:">
          <el-select v-model="q.comment_star" clearable placeholder="请选择">
            <el-option
              v-for="item in starOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>

        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-button size="mini" @click="downloadData" :type="downloading?'info':'primary'" :loading="downloading" icon="el-icon-printer" style="float: right">{{downloading?'导出中...':'导出报表'}}</el-button>
    </div>

    <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit
              highlight-current-row>
      <el-table-column prop="id" label='评价ID' width="80"></el-table-column>
      <el-table-column prop="user_id" label='用户ID' min-width="120"></el-table-column>
      <el-table-column prop="mch_name" label='所属商户' min-width="180">
        <template slot-scope="scope">{{scope.row.mch.name}}</template>
      </el-table-column>
      <el-table-column prop="agency_nickname" label='关联代理' min-width="100">
        <template slot-scope="scope">{{scope.row.agency.user_name}}</template>
      </el-table-column>
      <el-table-column prop="parent_name" label='所属总代' min-width="160">
        <template slot-scope="scope">{{scope.row.agency.parent.user_name}}</template>
      </el-table-column>
      <el-table-column prop="auto_comment" label='评价类型' width="160">
        <template slot-scope="scope">{{scope.row.auto_comment ? '自动评价':'主动评价'}}</template>
      </el-table-column>
      <el-table-column prop="order_id" label='订单ID' width="120"></el-table-column>
      <!-- <el-table-column prop="pay_type" label='支付方式' min-width="150">
        <template slot-scope="scope">{{PayMethodType[scope.row.pay_type]}}</template>
      </el-table-column>
      <el-table-column prop="receipt_type" label='收款方式' width="100">
        <template slot-scope="scope">{{RecepiptMethodType[scope.row.receipt_type]}}</template>
      </el-table-column> -->
      <el-table-column prop="amount" label='申请金额' width="100"></el-table-column>
      <el-table-column prop="comment_star" label='评分' width="60"></el-table-column>
       <el-table-column prop="comment_content" label='评价内容' width="200"></el-table-column>
      <el-table-column prop="created_at" label='评价时间' min-width="200"></el-table-column>
      <el-table-column prop="success_at" label='订单完成时间' min-width="200"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                     :page-size="q.page_size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="listData.total">
      </el-pagination>
    </div>
    <detailed v-if="showDetails" :showDetails.sync="showDetails"
              :rowInfo="rowInfo">
    </detailed>
  </div>
</template>

<script>
  import timedate from '@/utils/timedate.js'
  import {getOrderEvaluation, getMerchantsList, exportExel,getAgencyList} from '@/api'
  import {queryFilter} from '@/utils/patch'
  import {FormartCommentStar, FormartCommentRank,downloadDataToFile} from "../../utils/CommonJs";
  import detailed from './detailed'

  export default {
    components: {detailed},
    data() {
      return {
        listData: {},
        q: {page_size: 30, page_no: 1, agency_type: 2},
        listLoading: false,
        showUpdate: false,
        settleCycle: this.$store.state.app.settleCycle,
        show_id: null,
        MerchantsList: [],
        AgencyType: this.$store.state.app.AgencyType,
        PayMethodType: this.$store.state.app.payType,
        RecepiptMethodType:{
          1:'支付宝',
          2:'微信',
          3:'银行卡'
        },
        isEnable: false,
        isShow: false,
        showDetails: false,
        searchTime: [],
        score: 0,
        starOptions: [
          {value: 1, label: '1星'},
          {value: 2, label: '2星'},
          {value: 3, label: '3星'},
          {value: 4, label: '4星'},
          {value: 5, label: '5星'},
        ],
        rankOptions: [
          {value: 1, label: '差评'},
          {value: 2, label: '中评'},
          {value: 3, label: '好评'}

        ],
        comment_star_arrty: [],
      AgencyMainList: [],
      AgencyList: [],
        downloading: false
      }
    },
    activated() {
      this.getList()
      this.getMerchantsList()
    this.getAgencyList()
    this.getChildAgencyList()
    },
    deactivated() {
      this.listLoading = false
    },
    methods: {
      downloadData() {
        // queryFilter(this.q)
        queryFilter(this.q)
        this.downloading = true
        getOrderEvaluation(Object.assign({},this.q, {export: 1 })).then(res => {
          if (res.status === 0) {
        this.exportExel(res.data.task_id)
            // this.downloading = false
            // const tHeader = ['评价ID', '用户ID', '所属商户', '关联代理', '所属总代', '评价类型', '订单ID', '支付方式', '收款方式', '申请金额', '评分', '评价时间', '订单完成时间', '评价内容'];
            // const filterVal = ['id', 'user_id', 'mch.name', 'agency.user_name','agency.parent.user_name','auto_comment','order_id','pay_type','receipt_type','amount:int','comment_star','created_at','success_at','comment_content'];
            // downloadDataToFile(res,tHeader,filterVal,`评价管理${timedate.dateTodayHMS}`)
          }
        }).catch(() => {
            this.downloading = false
        })
      },
    async exportExel (task_id) {
      const exportStatusRes = await exportExel(task_id)
      if (exportStatusRes.status === 0) {
        switch (exportStatusRes.data.status) {
          case 0:
            setTimeout(() => {
              this.exportExel(task_id)
            }, 1500)
            break
          case 1:
            window.location.href = `${window.location.origin}/export_data/${exportStatusRes.data.file_name}`
            this.downloading = false
            this.$message.success('导出成功')
            break;
          case 2:
              this.$message.info('导出失败')
              this.downloading = false
            break;
          case 3:
              this.$message.info('取消导出')
              this.downloading = false
            break;
        }
      }
    },
      query() {
        // this.q.comment_rank = ""
        // if(this.comment_star_arrty.toString() != ""){
        //   this.q.comment_rank  =this.comment_star_arrty.toString() +"]"
        // }
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
        this.getList()
      },
      reload() {
        this.q = {page_size: 30, page_no: 1}
        this.getList()
      },
      showDetailed(row) {
        this.showDetails = true
        this.rowInfo = row
      },
      sortlist(sort) {
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.q.page_no = val
        this.getList()
      },
      getList() {
        if (this.searchTime.length > 0) {
          this.q.start_updated_at = this.searchTime[0] + ' 00:00:00'
          this.q.end_updated_at = this.searchTime[1] + ' 23:59:59'
        }
        queryFilter(this.q)
        getOrderEvaluation(this.q).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
            this.listData.items = Array.from(res.data.items, x => Object.assign({}, x, {amount: Number(x.amount) / 100}))
          }
        })
      },
    getAgencyList () {
      getAgencyList({ agency_type: 2, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyMainList = res.data.items
        }
      })
    },
    getChildAgencyList () {
      getAgencyList({ agency_type: 1, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyList = res.data.items
        }
      })
    },
      typeFormartter(row, column) {
        let columnName = column.property
        if (columnName === 'use_vcode') {
          return row.use_vcode ? '是' : '否'
        } else if (columnName === 'enable') {
          return row.enable ? '是' : '否'
        } else if (columnName === 'working') {
          return row.working ? '是' : '否'
        }
      },
      getMerchantsList() {
        getMerchantsList().then(res => {
          if (res.status === 0) {
            this.MerchantsList = res.data.items
          }
        })
      },
      exportExcel() {
        this.$message({message: '待开发', type: 'error'})
      },
      FormartComment(row, column) {
        if (column.property == 'comment_star') {
          return FormartCommentStar(row.comment_star)
        } else if (column.property == 'comment_rank') {
          return FormartCommentRank(row.comment_rank)
        }
      }
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList()
        }
      }
    }
  }
</script>

<style type="text/css">
  .el-form-item__label{
    width: 100px !important;
  }
</style>
